import type { Config } from "tailwindcss";
import typography from "@tailwindcss/typography";

const config: Config = {
  // 表示任何以 "dark-" 开头的 data-theme 属性也会触发暗黑模式
  darkMode: ["class", '[data-theme^="dark-"]'],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        // 自定义颜色 primary
        primary: {
          DEFAULT: "var(--primary)",
          foreground: "var(--primary-foreground)",
          card: "var(--primary-card)",
        },
      },
      typography: (theme: (path: string) => string | undefined) => ({
        xl: {
          css: {
            h1: { fontSize: theme("fontSize.4xl") },
            h2: { fontSize: theme("fontSize.3xl") },
            h3: { fontSize: theme("fontSize.2xl") },
          },
        },
      }),
    },
  },
  plugins: [typography],
};
export default config;
